<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="http://cdn.bootcss.com/element-ui/1.3.3/theme-default/index.css" rel="stylesheet">


<title>HTTP全局锁</title>
</head>
<body>

<div id="app">
<el-row>
  <el-col :span="18" :offset="3" >
	<div style="margin-bottom: 20px;">
	  <el-alert
	    type="warning"
	    :closable="false"
	     >
	    <div><small><span style="display:inline-block;width: 100px">加锁 </span><font color="">http://地址:端口(默认8000)/lock?name=锁名(必填)&tid=事务id(必填)</font>&lockTime=锁定毫秒(默认5000)&waitTime=等待锁毫秒(默认5000)" </small></div>
	    <div><small><span style="display:inline-block;width: 100px">尝试加锁</span><font color="">http://地址:端口(默认8000)/tryLock?name=锁名(必填)&tid=事务id(必填)</font>&lockTime=锁定毫秒(默认5000)" </small></div>
	    <div><small><span style="display:inline-block;width: 100px">解锁 </span><font color="">http://地址:端口(默认8000)/unLock?name=锁名(必填)&tid=事务id(必填)</font>&across=true/false是否解除全部重入(默认false)" </small></div>
	  </el-alert>
	</div>
  
  <div>
	<el-form :inline="true" :model="testLockData" v-loading="testLockData.loading" class="demo-form-inline">
		  <el-form-item label="锁名">
		    <el-input v-model="testLockData.name" placeholder="锁名"></el-input>
		  </el-form-item>
		  <el-form-item label="事务id">
		    <el-input v-model="testLockData.tid" placeholder="事务id"></el-input>
		  </el-form-item>
		  <el-form-item label="锁定毫秒">
		    <el-input v-model="testLockData.lockTime" placeholder="默认5000"></el-input>
		  </el-form-item>
		  <el-form-item label="等待毫秒">
		    <el-input v-model="testLockData.waitTime" placeholder="默认5000"></el-input>
		  </el-form-item>
		  </el-form-item><el-form-item>
		    <el-button type="primary" @click="testLock">加锁</el-button>
		    <el-button type="primary" @click="testTryLock">尝试加锁</el-button>
		  </el-form-item>
	</el-form>
  </div>
  <div >
  
  
    <el-table
    :data="tableData"
    border
    stripe
    style="width: 100%">
    <el-table-column
      prop="name"
      label="锁名"
      min-width="150"
      >
    </el-table-column>
    <el-table-column
      prop="waitnum"
      label="等待者数量"
      width="150"
      >
    </el-table-column>
    <el-table-column
      prop="tid"
      label="当前事务id"
      width="150"
      >
    </el-table-column>
    <el-table-column
      prop="reenterNum"
      label="当前重入数"
      width="150"
      >
    </el-table-column>
    <el-table-column
      prop="locktime"
      label="当前锁定毫秒"
      width="150"
      >
    </el-table-column>
    <el-table-column
      prop="maxlocktime"
      label="当前最大锁定毫秒"
      width="150"
      >
    </el-table-column>
    <el-table-column
      label="操作"
      width="150">
      <template scope="scope">
        <el-button @click="unLock(scope.$index, scope.row)" type="text" >解锁(全部重入锁)</el-button>
      </template>
    </el-table-column>
  </el-table>

  
  
  
  </div>
  </el-col>
</el-row>


</div>
</body>
<script src="http://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script src="http://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
<script src="http://cdn.bootcss.com/element-ui/1.3.3/index.js"></script>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">


function stompConnect(){
	var socket = new SockJS("/ws");
	var stompClient = Stomp.over(socket);
	stompClient.connect({}, function(frame) {  
	    console.log('Connected: ' + frame);  
	    stompClient.subscribe('/topic/status', function(greeting){  
	        vm.tableData = JSON.parse(greeting.body);
	    });  
	},function(){
		console.log("断了");
		window.setTimeout(function(){
			stompConnect();
		},10000);
	});
}

stompConnect();



var vm = new Vue({
		el : '#app',
		data : function() {
			return {
				"port":8000,
				"tableData" : [],
				"testLockData":{
					"loading":false,
					"name":"",
					"tid":"",
					"lockTime":50000,
					"waitTime":50000
				}
			}
		},
        mounted:function(){
        	var self=this;
        	$.get("/getPort").success(function(data){
        		self.port = data;
        	}).error(function(xhr,st,th){
	        	self.$message({
		            message: "查询lock端口异常",
		            type: 'error'
		          });
	        })
        },
		methods: {
			testLock:function(){
				var self=this;
		        var url = window.location.protocol+"//"+window.location.hostname+":"+self.port+"/lock";
		        self.testLockData.loading=true;
		        $.get(url,{
		        	"name":self.testLockData.name,
		        	"tid":self.testLockData.tid,
		        	"lockTime":self.testLockData.lockTime,
		        	"waitTime":self.testLockData.waitTime
		        }).success(function(){
		        	self.$message({
			            message: "加锁成功",
			            type: 'success'
			          });
		        }).error(function(xhr,st,th){
		        	self.$message({
			            message: xhr.responseText,
			            type: 'error'
			          });
		        }).complete(function(){
			        self.testLockData.loading=false;
		        });

			},
			testTryLock:function(){
				var self=this;
		        var url = window.location.protocol+"//"+window.location.hostname+":"+self.port+"/tryLock";
		        self.testLockData.loading=true;
		        $.get(url,{
		        	"name":self.testLockData.name,
		        	"tid":self.testLockData.tid,
		        	"lockTime":self.testLockData.lockTime,
		        	"waitTime":self.testLockData.waitTime
		        }).success(function(){
		        	self.$message({
			            message: "加锁成功",
			            type: 'success'
			          });
		        }).error(function(xhr,st,th){
		        	self.$message({
			            message: xhr.responseText,
			            type: 'error'
			          });
		        }).complete(function(){
			        self.testLockData.loading=false;
		        });

			},
			unLock:function(index, row) {
				var self = this;
		        console.log(index, row);
		        var url = window.location.protocol+"//"+window.location.hostname+":"+self.port+"/unLock";
		        $.get(url,{
		        	"name":row.name,
		        	"tid":row.tid,
		        	"across":true
		        }).success(function(){
		        	self.$message({
			            message: "解锁"+row.name,
			            type: 'warning'
			          });
		        }).error(function(xhr,st,th){
		        	self.$message({
			            message: xhr.responseText,
			            type: 'error'
			          });
		        })
		    }
		}
	})
</script>
</html>